<template>
	<div class="kp_message">
		<div class='box'>
			<div class='boxList' v-for="(item,index) in list" :key="index">
				<div class='name'>{{item.name}}<span v-if="item.passengerType=='1'" class="nameT">(成人票)</span><span v-else-if="item.passengerType=='2'" class="nameT">(儿童票)</span><span v-else-if="item.passengerType=='3'" class="nameT">(学生票)</span><span v-else="item.passengerType==''"></span></div>
				<div class='tel' v-if='item.mobileNo'>手机号：{{item.mobileNo}}</div>
				<!--<div class='tel kp-farecon' v-if="item.kpcxcertnO.length == 0">添加身份信息</div>-->
				<div class='tel' v-if='item.kpcxcertnO[0].certType=="1"' v-for="(item1,index1) in item.kpcxcertnO" :key="index">
					<em v-if="item.kpcxcertnO[0].certType=='1'">身份证号</em>：{{item1.certNo}}</div>
				<div class='icon' @click="getEditPeople(item)">
					<img src='../../../assets/bianji.png'></img>
				</div>
			</div>
		</div>
		<div class='add' catchtap='add' @click="getAddPeople">
			<div class='addFont'>
				<img src='../../../assets/jia.png'></img>
			</div>添加联系人
		</div>
	</div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
	data() {
		return{
			list:[],//获取联系人列表
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		//方法放置
		getList(){
			this.$loading.show();
			let param = {
				userID: this.userinfo.userID,
      			orderType: 0,
			};
			let that = this;
			this.$http.post(
//				this.$baseUrl.baseurl +'KPCX/appContacts/findAll',
				this.$baseUrl.baseurl +'kpcx/appContacts/findAll',
				param
			).then(function(res){
				if(res.data.Code == 0){
					that.list = res.data.Result.ContactsList;
					that.$store.commit('MY_TABMESS',that.list);
					that.$loading.hide();
				}else{
					that.$loading.hide();
					that.$toast(res.data.msg);
				}
				
			}).catch(error => {
				this.$loading.hide();	
			});
		},
		getAddPeople(){
			this.$router.push({
				path:"/my/addLinkman",
				query:{
					peo:'add',
				}
			})
		},
		getEditPeople(item){
			this.$router.push({
				path:"/my/addLinkman",
				query:{
					peo:'edit',
					editinfo:JSON.stringify(item),
				}
			})
		}
	},
	created() {
		
	},
	filters: {
        
   },
	watch: {},
	components: {
	},
	computed: {
		...mapGetters([
			'userinfo',
		])
	},
};
</script>

<style scoped>
	.kp_message{
		background: #F4F5F9;
		padding-top: 90px;
	}
	.box {
		margin: 24px 20px 50px;
		background-color: #fff;
	}
	
	.boxList {
		padding: 28px 30px;
		box-sizing: border-box;
		border-bottom: 1px solid #F0F0F0;
		position: relative;
	}
	
	.name {
		font-size: 32px;
		color: #444;
	}
	
	.tel {
		font-size: 28px;
		color: #8a8a8a;
		height: 35px;
		line-height: 35px;
		margin-top: 27px;
	}
	
	.icon {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 29px;
		position: absolute;
		top: 0;
		right: 28px;
	}
	
	.icon>img {
		width: 29px;
		height: 29px;
	}
	
	.add {
		height: 88px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px 0;
		color: #8a8a8a;
		font-size: 32px;
	}
	
	.addFont {
		width: 36px;
		height: 36px;
		margin-right: 20px;
	}
	
	.addFont>img {
		width: 100%;
		height: 100%;
	}
	.kp-farecon{
		color: rgb(59,195,194);
	}
	.nameT{
		color: rgb(138,138,138);
	}
</style>